<template>
  <div class="year-month-week-picker">
    <!-- 左侧：选择年份和月份 -->
    <div>
      <el-select
        v-model="selectedYearMonth"
        placeholder="选择年份和月份"
        class="w-[150px]"
      >
        <el-option
          v-for="option in yearMonthOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </div>

    <!-- 右侧：选择第几周 -->
    <div>
      <el-select
        v-model="selectedWeek"
        placeholder="选择周数"
        class="w-[150px]"
      >
        <el-option
          v-for="week in maxWeeks"
          :key="week.value"
          :label="week.label"
          :value="week.value"
        />
      </el-select>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(["update:modelValue"]);

const selectedYearMonth = ref(null);
const selectedWeek = ref(null);

// 最近两年的年份-月份数组
const lastTwoYears = computed(() => {
  const currentYear = new Date().getFullYear();
  return [currentYear, currentYear + 1];
});

// 年月选项
const yearMonthOptions = computed(() => {
  const options = [];
  lastTwoYears.value.forEach((year) => {
    for (let month = 1; month <= 12; month++) {
      options.push({
        label: `${year}年${month}月`,
        value: `${year}-${month}`,
      });
    }
  });
  return options;
});
const maxWeeks = [
  { label: "第一周", value: 1 },
  { label: "第二周", value: 2 },
  { label: "第三周", value: 3 },
  { label: "第四周", value: 4 },
  { label: "第五周", value: 5 }
];
watch([selectedYearMonth, selectedWeek], () => {
  emit("update:modelValue", [selectedYearMonth.value, selectedWeek.value]);
});
watch(
  () => props.modelValue,
  (newValue) => {
    selectedYearMonth.value = newValue[0];
    selectedWeek.value = newValue[1];
  },
  { immediate: true }
);
</script>

<style scoped>
.year-month-week-picker {
  display: flex;
  align-items: center;
}
</style>
